<template>
  <div style="width: 100%;height: 100%;">
    <div id="map" style="width: 100%;height: 100%;"></div>
    <div style="position: absolute;bottom: 20px ;right: 0 ;background-color: rgba(255,255,255,0.8);z-index: 10000;min-width: 150px;padding: 10px;display: flex;flex-direction: column;align-items: flex-start">
      <van-radio-group v-model="radio" @change="onChange">
        <van-radio name="1">1小时降雨量</van-radio>
        <van-radio name="2">日降雨量</van-radio>
        <van-radio name="3">累计降雨量</van-radio>
      </van-radio-group>
    </div>
    <div style="position: absolute;bottom: 0 ;left: 0 ;background-color: rgba(255,255,255,0.6);z-index: 10000;min-width: 150px;padding: 10px;display: flex;flex-direction: column;align-items: flex-start">
      图例（时段降水量）
      <div ><img :src="imgUrlRed" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;">>250毫米</div></div>
      <div ><img :src="imgUrlPur" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;">100~250毫米</div></div>
      <div ><img :src="imgUrlYell" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;">50~100毫米</div></div>
      <div ><img :src="imgUrlYel" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;">25~50毫米</div></div>
      <div><img :src="imgUrlGreen" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;">10~25毫米</div></div>
      <div ><img :src="imgUrl" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;"><10毫米</div></div>
      <div ><img :src="imgUrlGray" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;">>无数据</div></div>
    </div>
  </div>

</template>

<script>
  import L from "leaflet";
  import API from "../../api/api_common";


  export default {
    name: "WaterMap",
    data() {
      return {
        imgUrl:require("../../../static/qizi.png"),
        imgUrlGreen:require("../../../static/qizigreen.png"),
        imgUrlRed:require("../../../static/qizired.png"),
        imgUrlYel:require("../../../static/qiziye.png"),
        imgUrlGray:require("../../../static/qizigray.png"),
        imgUrlPur:require("../../../static/qizhipurple.png"),
        imgUrlYell:require("../../../static/qizhiyell.png"),
        jsonUrl:require("../../../static/ylz.json"),
        map: null,
        loading: false,
        tableData: [],
          radio:"1"
      }
    },
    mounted() {
      this.getData();
      this.initMap();
    },
    methods: {
        onChange(){
          this.addJson();
        },
      initMap() {
        let map = L.map("map", {
          minZoom: 1,
          maxZoom: 14,
          center: [42.324, 121.898],
          zoom: 10,
          zoomControl: false,
          preferCanvas: true,
          attributionControl: false,
          crs: L.CRS.EPSG3857
        });
        this.map = map; //data上需要挂载
        let now = new Date();
        let hour = now.getHours();
        if (hour < 18) {
          L.tileLayer(
            "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
          ).addTo(map);
        } else {
          L.tileLayer(
            "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
          ).addTo(map);
        }
        this.addJson()
      },

      addJson() {
          /**
           * 根据名字移除图层
           * @param name [string] 图层名称
           */

              this.map.eachLayer(layer=> {
                  if (layer.getAttribution() == "geojson") {
                      this.map.removeLayer(layer);
                  }
              });

          //先定义点的样式
         let  myIcon = L.icon({
             iconUrl: this.imgUrl,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });
         let  myIconRed = L.icon({
             iconUrl: this.imgUrlRed,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });let  myIconYel = L.icon({
             iconUrl: this.imgUrlYel,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });let  myIconGray = L.icon({
             iconUrl: this.imgUrlGray,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });let  myIconGreen = L.icon({
             iconUrl: this.imgUrlGreen,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });let  myIconPurple = L.icon({
             iconUrl: this.imgUrlPur,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });let  myIconYell = L.icon({
             iconUrl: this.imgUrlYell,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });
         let sum=0;
         for (let i = 0; i < this.jsonUrl.features.length; i++) {
          let feture=this.jsonUrl.features[i];
          let num=feture.properties["站码"];

          feture.properties.yd="未查询到";
          feture.properties.time="未查询到";
          for (let j = 0; j < this.tableData.length; j++) {
            if(num==this.tableData[j].STCD){
                console.log("切换"+this.radio)
                switch (this.radio) {
                    case "1":
                        feture.properties.yd=this.tableData[j].DRP;
                        break;
                    case "2":
                        feture.properties.yd=this.tableData[j].YESDATA;
                        break;
                    case "3":
                        feture.properties.yd=this.tableData[j].DAYDATA;
                        break;
                     default:break;

                }
              feture.properties.time=this.tableData[j].TM;
              sum++;
              break;
            }
          }
         }
          L.geoJSON(this.jsonUrl, {
              attribution:"geojson",
            pointToLayer: function(feature, latlng) {
              if(feature.properties.yd=="未查询到"){
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIconGray
                });
              }else if(feature.properties.yd&&feature.properties.yd>=10&&feature.properties.yd<25){
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIconGreen
                });
              }
              else if(feature.properties.yd&&feature.properties.yd>=25&&feature.properties.yd<50){
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIconYel
                });
              }else if(feature.properties.yd&&feature.properties.yd>=50&&feature.properties.yd<100){
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIconYell
                });
              }else if(feature.properties.yd&&feature.properties.yd>=100&&feature.properties.yd<250){
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIconPurple
                });
              }
              else if(feature.properties.yd&&feature.properties.yd>=250){
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIconRed
                });
              }else {
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIcon
                });
              }
            }
          }).bindPopup(function(layer) {
            console.log(layer.feature.properties);
            console.log(this.tableData);
            return "<span class='bold'>"+layer.feature.properties["站名"]+"("+layer.feature.properties["站码"]+")"+"</span><br/>"
            +"地址："+layer.feature.properties["地点"]+"<br/>"
            +"雨量："+layer.feature.properties.yd+"<br/>"
            +"时间："+layer.feature.properties.time+"<br/>"
            ;
          }).addTo(this.map);


      },
      getData() {
       this.tableData=JSON.parse(localStorage.getItem("data"));
      },
    }
  }
</script>

<style>
.bold{
  font-weight: bold;
}
</style>
